<template>
  <div class="app-container content">
    <div class="tableoperation" style="display:flex;justify-content: right;">
      <print :disabled="dataList == 0" :title="title">
        <table style="width: 100%"  border="1" cellspacing="0" cellpadding="0" align="center">
          <slot name="print" :dataList="dataList"></slot>
          <tr>
            <td align="center" v-for="(tItem,tIndex) in sums" :key="tIndex">{{tItem}}</td>
          </tr>
        </table>
      </print>
    </div>
    <div v-if="title" style="margin:-25px 0 15px ;font-size: 20px;font-weight: bold;width: 100%;text-align: center;">{{title}}</div>
    <el-table v-loading="loading" :max-height="height - 400 + 'px'" :data="dataList" show-summary :summary-method="summaryMethod">
    	<slot></slot>
    </el-table>
  </div>
</template>

<script>
  export default{
    name:'resursionTable',
    props:{
      title:{
        type:String,
        default:''
      },
      requestMethod:{
        type:Function,
        required: true
      },
      notSum:{
        type:Array,
        default: ()=>{
          return ['year']
        }
      },
       //允许跨年数
      allowCrossYears:{
        type:Number,
        default:2
      }
    },
    created(){
      this.init()
      this.$nextTick(()=>{
        window.MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
      })
    },
    data(){
      return {
        loading:false,
        dataList:[],
        // 视图高度
        height: document.documentElement.clientHeight,
        total:0,
        queryParams:{
          pageNum:1,
          pageSize:10
        },
        year:null,
        sums:[],
        //跨年数
        crossYears:0,
      }
    },
    methods:{
      // 合计赋值
      summaryMethod(param) {
        const { columns, data } = param;
        const sums = [];
        // 以下是对小计和总计分别进行赋值
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "总计";
            return;
          }
          //将当前列的所有值存储到values中  注：非数字会返回NaN。
          const values = data.map(item => Number(item[column.property]));
          //如果label包含当前column.property，则进行数据处理
          if (!this.notSum.includes(column.property)) {
            // 总计
            let allTotal = values
              .reduce((prev, curr) => {
                const value = Number(curr);
                // 如果是数字则进行累加
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            allTotal =  (Number.isFinite(allTotal) && !Number.isInteger(allTotal))? allTotal.toFixed(2) : allTotal
            sums[index] =  allTotal;
          } else {
            sums[index] = "";
          }
        });
        this.sums = sums
        return sums;
      },
      init(){
        this.year = new Date().getFullYear();
        this.getList()
      },
      getList(){
        if(this.crossYears < this.allowCrossYears){
          this.requestMethod(this.year).then(res=>{
            if( res.data?.length>0){
              if(this.dataList?.length > 0){
                this.dataList.push(...res.data)
              }else{
                this.dataList = res.data;
              }
              this.crossYears = 0
            }else{
              this.crossYears++
            }
            this.year--;
            setTimeout(()=>{
              this.getList()
            },800)
          })
        }

      }
    }
  }
</script>

<style lang="scss">
  .el-table {
    overflow: visible !important;
  }
</style>
